<!DOCTYPE html>
<html>
    <head>
        <!-- <link rel="stylesheet" href="../css/demo1.css"> -->
         <meta charset="utf-8">
         <style>
            *{
    margin: 0;
    padding: 0;
}

.con{
    margin: 0 auto;
    width: 966px;

}

.header{
    height: 110px;
    background: white;
}
.logo{
    width: 265px;
    height: 110px;
    background: url("https://file.imgcc.cloud/images/2024/07/24/12fe05fcec52bbc553082bb95bcf8b8f.jpeg");
    background-size: contain; 
    background-position: center;  
    background-repeat: no-repeat;
    float: left;
}
.headerright{
    float: right;
}
.headerright ul{
    height: 44px;
    margin-top: 10px;
    line-height: 44px;
}
.headerright ul li{
    list-style: none;
    float: left;
    margin-right: 30px;
}
.headerright a{
    border-right: 1px solid black;
    padding: 0 13px;
    font-size: 13px;
    color: rgb(108, 112, 115);
}
.headerright .last{
    border: 0;
    padding-right: 0;
}
.headerright .active{
    color: red;
}

.search{
    float: right;
    width: 235px; 
    height: 28px;
    border: 1px solid rgb(108, 112, 115);
}
.search input{
    outline: none;
    border: 0;
}
.search .left{
    width: 196px;
    height: 28px;
    float: left;
    padding-left:14px ;
}
.search .right{
    float: right;
    width: 25px;
    height: 28px;
    background: url("https://file.imgcc.cloud/images/2024/07/24/cfc0008ad7a8d6059a1f99d2c1f4347c.png") no-repeat left center;
}

.nav li{
    /* background: blue; */
    list-style: none;
    color: white;
    float: left;
    font-size: 16px;
    margin-right: 76px;
}

.nav{
    height: 53px;
    line-height: 53px;
    border-top: 1px solid blue;
    background: #0c345c;
}

.banner{
    background: url("https://file.imgcc.cloud/images/2024/07/24/73ad991269edf6de0f6164250a1bb794.png") no-repeat center;
    height: 380px;
    background-size: contain; 
}
.list{
    height: 213px;
    /* background: yellow; */
    margin-top: 51px;
    margin-bottom: 35px;
}
.item{
    height: 211px;
    width: 305px;
    border: 1px solid black;
    float: left;
    margin-right: 19px;
    
}
.item img{
    width: 306px;
    height: 168px;
    background-size: contain; 
    display: block;
}
.item p{
    /* display: block; */
    height: 47px;
    line-height: 47px;
    padding-left: 30px;
    font-size: 16px;

}
.itemlast{
    margin-right: 0;
}
.footer{
    height: 206px;
    border-top: 1px solid black;
}

.footer ul{
    height: 84px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid black;
}
li{ 
    list-style: none;
}
.footer ul li{
    width: 210px;
    padding-left: 30px;
    font-size: 16px;
    color: #0c345c;
    float: left;
}
.footer p{
    height: 61px;
    line-height: 61px;
    padding-left: 30px;
    font-size: 12px;
}
.footer span{
    color: rgb(16, 117, 199);
    height: 61px;
    line-height: 61px;
    font-size: 12px;

}
         </style>
    </head>
    <body>
        <div class="header con">
            <div class="logo"></div>
            <div class="headerright">
                
                <ul>
                    <li><a class="active">视频学习</a></li>
                    <li><a>团队课程</a></li>
                    <li><a class="active">研发中心</a></li>
                    <li><a class="last">关于我们</a></li>
                </ul>
                <div class="search">
                    <input type="text" placeholder="搜索" class="left">
                    <input type="submit" value="" class="right">

                </div>
            </div>

        </div>
        <div class="nav">
            <ul class="con">
                <li>走进编程</li>
                <li>产品介绍</li>
                <li>公司咨询</li>
                <li>企业责任</li>
                <li>其他other</li>

            </ul>
        </div>
        <div class="banner con"></div>
        <div class="list con">
            <div class="item">
                <img src="https://file.imgcc.cloud/images/2024/07/24/cb73da0532e4f8c7cc37dd0d5dc249b3.jpeg" alt="">
                <p>教学温暖你我</p>
            </div>
            <div class="item">
                <img src="https://file.imgcc.cloud/images/2024/07/24/33f991fb5e04d1f82141a3d101289cd7.jpeg" alt="">
                <p>其乐融融</p>
            </div>
            <div class="item itemlast">
                <img src="https://file.imgcc.cloud/images/2024/07/24/a13f0f72d06c90ae0b151b38721d16e2.jpeg" alt="">
                <p>把爱带回家</p>
            </div>

        </div>
        <div class="footer">
            <div class="con">
                <ul>
                    <li>关于我们</li>
                    <li>企业文化</li>
                    <li>行为准则</li>
                    <li>大事记</li>
                    <li>我们的产品</li>
                    <li>联系我们</li>
                    <li>新闻动态</li>
                    <li>公司新闻</li>                
                    <li>数据报告</li>
                    <li>企业社会责任</li>
                    <li>加入我们</li>
                    <li>招聘官网</li>
                </ul>
                <p>以上内容均由筑梦智程团队提供,    © 2024 ChatGLM4 京公网安备<span>11010802041394</span>号</p>
            </div>
        </div>

    </body>
</html>